<div fxLayout="row wrap" fxLayoutGap="24px grid">
  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>基本表单</mat-card-title>
      <mat-card-content>
        <form>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的邮箱" />
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的密码" />
          </mat-form-field>
          <mat-checkbox class="form-check">记住我</mat-checkbox>
          <button mat-raised-button color="primary" type="submit">提交</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>基本表单</mat-card-title>
      <mat-card-content>
        <form>
          <div fxLayout="row" fxLayoutAlign="center center">
            <label>邮箱：</label>
            <mat-form-field fxFlex> <input matInput /> </mat-form-field>
          </div>
          <div fxLayout="row" fxLayoutAlign="center center">
            <label>密码：</label>
            <mat-form-field fxFlex> <input matInput /> </mat-form-field>
          </div>

          <mat-checkbox class="form-check">记住我</mat-checkbox>
          <button mat-raised-button color="primary" type="submit">提交</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<div fxLayout="row" fxLayoutAlign="start center" class="m-t-24">
  <mat-card>
    <mat-card-title>单行表单</mat-card-title>
    <mat-card-content>
      <form>
        <mat-form-field>
          <input matInput placeholder="请输入您的邮箱" />
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="请输入您的密码" />
        </mat-form-field>
        <button mat-raised-button color="primary" type="submit">提交</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>
